feat: Improve UX of namespace select filter #7783
Conversation
Nokel81
requested review from
jansav and
aleksfront
and removed request for
a team
Nokel81
force-pushed
the
improve-namespace-selector
branch
2 times, most recently
from
426d33e
to
14bd0ef
Compare
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Nokel81
force-pushed
the
improve-namespace-selector
branch
from
14bd0ef
to
540860e
Compare
|
Conflicts have been resolved. A maintainer will review the pull request shortly. |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Nokel81
force-pushed
the
improve-namespace-selector
branch
from
5fe8b46
to
4a238e4
Compare
|
Conflicts have been resolved. A maintainer will review the pull request shortly. |
- Add better support for thousands of namespaces - Add support for mouse only multi-selection Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
…filter behaviour Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
…amespace Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Sebastian Malton <sebastian@malton.name>
Nokel81
force-pushed
the
improve-namespace-selector
branch
from
c30a7f5
to
6d3342e
Compare
There was a problem hiding this comment.
First, this is a great improvement to the namespace selector! However, there are a few issues that I would like to address and suggest changes for, either immediately or in different pull requests.
To ensure intuitive understanding and ease of use, I propose the following improvements:
- Remove the "namespace" icon as it doesn't serve a clear purpose before being clicked. It should be immediately apparent without any confusion.
- Eliminate the need for advising tooltips. Depending on hints suggests a subpar user experience.
- Replace the icons with more familiar checkboxes.
- When clicking on a namespace name, only that particular namespace should be selected while others are deselected.
- Clicking on the checkbox should add the corresponding namespace to the list.
- Incorporate accessibility features that are currently missing.
- The overall styling requires attention, including fine-tuning the colors for the light theme.
Please refer to the following images:
Elements to be removed:
Replace icons with checkboxes:
I recommend splitting these changes into multiple pull requests, with a special emphasis on highlighting the performance improvement aspect, which is currently of utmost importance.
Both of these are already implemented...
I don't think we have a need for them, but I don't see how having hints are bad.
I think if I instead make the icon non-focusable (and instead the text focuses) I think it should be fine to keep them. I think it adds a nice contrast between each individual namespace and the "All Namespaces" option.
This is rather vague, which ones do you mean exactly?
Examples? I am already using the colour CSS variables from our themes.
I would like to get some more insight as to why this is better. Sure a checkbox by itself implies multiselection, but I think that there are other ways of implying multiselection, especially one that is "confirmed" immediately. Would having the |
closes #7590
NOTE:
This PR also includes performance improvements to the
NamespaceSelectFilterin the form of usingVirtualListas part of the new implementation.Screen.Recording.2023-05-25.at.3.31.55.PM.mov